<template>
  <div class="sysConfig">
    <div class="sysConfig_content">
      <div class="sysConfig_content_title">
        单位人员配置
      </div>
      <div class="sysConfig_content_search">
        <div class="sysConfig_content_search_left">
          <vxe-input v-model="filterName" type="search" placeholder="试试全表搜索" @keyup="searchEvent" />
        </div>
        <div style="text-align:right" class="sysConfig_content_search_right">
          <el-button size="medium" type="primary" @click="batchConfig">批量配置</el-button>
        </div>
      </div>
      <div class="sysConfig_content_Table">
        <vxe-table
          ref="xTable"
          v-loading="tableLoading"
          :data="tableData"
          border
          stripe
          highlight-current-row
          highlight-hover-row
          resizable
          show-overflow
          :max-height="tableHeight"
          :checkbox-config="{ highlight: true}"
          :header-cell-style="{
            'background-color': 'rgb(64, 158, 255)',
            'color':'#fff',
            'border-bottom': '1px solid #fff',
            'text-align': 'center',
          }"
          :cell-style="{
            'text-align':'center'
          }"
        >
          <vxe-table-column type="checkbox" width="60" />
          <vxe-table-column
            :min-width="100"
            width="120"
            title="头像"
          >
            <template v-slot="{ row }">
              <span class="sysConfig_span_tb">{{ row.trueName1.split('')[0] }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column type="html" :min-width="220" field="trueName" title="姓名" />
          <vxe-table-column type="html" :min-width="300" field="telephone" title="手机号码" />
          <vxe-table-column type="html" :min-width="300" field="enterprisesList" title="单位">
            <template v-slot="{ row }">
              <span v-if="row.enterprisesList.length!==0" class="sysConfig_content_Table_Link" @click="editEnterpriseConfig(row)">
                <el-tooltip class="item" effect="dark" content="点击查看更多" placement="top">
                  <span>已绑定</span>
                </el-tooltip>
              </span>
              <span v-else class="sysConfig_content_Table_unLink">未绑定</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="160">
            <template v-slot="{ row }">
              <el-button size="small" @click="editEnterpriseConfig(row)">单位配置</el-button>
            </template>
          </vxe-table-column>
          <template #empty>
            <div style="text-align:center">
              <span style="color: red;">
                <img
                  style="height:120px"
                  src="../../assets/images/monthReport/noReport.png"
                >
                <div>暂无修改记录</div>
              </span>
            </div>
          </template>
        </vxe-table>
      </div>
      <div class="sysConfig_dialog">
        <sysDialog ref="sysDialog" />
      </div>
    </div>
  </div>
</template>;;
<script>
import { getUserList, showEnterprise } from '@/api/sysConfig/index';
import sysDialog from './components/SysDialog/index.vue';
import { Message } from 'element-ui';
export default {
  inject: ['reload'],
  components: {
    sysDialog
  },
  data() {
    return {
      filterName: '',
      tableLoading: false,
      tableData: [],
      originTableData: [],
      tableHeight: '',
      userId: ''
    };
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.xTable.$el.offsetTop - 160;
    }, 500);
  },
  created() {
    if (!localStorage.getItem('isReload')) {
      localStorage.setItem('isReload', 'isReload');
      window.location.reload();
    }
    this.getTable(true);
  },
  methods: {
    gotoShowBind() {

    },
    batchConfig() {
      if (this.$refs.xTable.getCheckboxRecords().length === 0) {
        Message({
          message: '请勾选用户',
          type: 'warning'
        });
      } else {
        this.editEnterpriseConfig();
      }
    },
    searchEvent() {
      // 去前后空格 大小写 字符串
      const filterName = (this.filterName + '').trim().toLowerCase();
      if (filterName) {
        const filterRE = new RegExp(filterName, 'gi');
        const searchProps = ['trueName', 'telephone'];
        const rest = this.originTableData.filter(item => searchProps.some(key => (item[key] + '').toLowerCase().indexOf(filterName) > -1));
        this.tableData = rest.map(row => {
          const item = Object.assign({}, row);
          searchProps.forEach(key => {
            item[key] = (item[key] + '').replace(filterRE, match => `<span class="keyword-lighten">${match}</span>`);
          });
          return item;
        });
      } else {
        this.tableData = this.originTableData;
      }
    },
    // 单位配置
    editEnterpriseConfig(row) {
      this.$refs.sysDialog.checked = false;
      if (row) {
        this.userId = row.id;
      } else {
        this.userId = '';
      }
      showEnterprise({
        userId: this.userId
      }).then(res => {
        this.$refs.sysDialog.dialogVisible = true;
        if (res.success) {
          this.$refs.sysDialog.enterpriseTreeData = res.data;
          if (row) {
            this.$refs.xTable.clearCheckboxRow();
            this.setTreeKey = [];
            res.data.forEach(res => {
              if (res.isCheck === 1) {
                this.setTreeKey.push(res.guid);
              }
            });
            this.$nextTick(() => {
              this.$refs.sysDialog.name = row.trueName1;
              this.$refs.sysDialog.$refs.tree.setCheckedKeys(this.setTreeKey);
            });
          } else {
            this.$nextTick(() => {
              this.$refs.sysDialog.name = '批量';
              this.$refs.sysDialog.$refs.tree.setCheckedKeys([]);
            });
          }
        } else {
          this.$refs.sysDialog.enterpriseTreeData = [];
        }
      });
    },
    getTable(isDo) {
      this.tableLoading = true;
      getUserList({}).then(res => {
        this.tableLoading = false;
        if (res.success) {
          res.data.map(o => {
            o.trueName1 = o.trueName;
            o.enterprisesList = [];
            o.enterprises.map(b => {
              o.enterprisesList.push(b.NAME);
            });
          });
          this.originTableData = res.data;
          this.tableData = res.data;
        } else {
          this.originTableData = [];
        }
        if (isDo) {
          this.searchEvent();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.sysConfig_span_tb{
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 18px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  background: url('../../assets/images/layout/root.jpg');
  background-size: 100% 100%;
  vertical-align: super;
  color:#fff
}
.sysConfig_content_Table_unLink{
    color: #FAAD14;
}
  .sysConfig{
    padding: 10px;
  }
  .sysConfig_content{
    background: #fff;
    border-radius: 3px;
    padding:5px
  }
  .sysConfig_content_title{
    height: 33px;
    opacity: 1;
    font-size: 22px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    color: rgba(0,0,0,0.85);
    line-height: 33px;
    margin-top: 10px
  }
  .sysConfig_content_search{
     display: flex;
     margin-top: 5px 0px;
     padding: 0px 20px;
  }
  .sysConfig_content_search_left,.sysConfig_content_search_right{
    flex:1
  }
  .sysConfig_content_Table{
    margin-top: 10px;
    padding:0px 15px;
  }
  .sysConfig_content_Table_Link{
    color: green;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
